<template>
  <div>
    <!-- action将来需要提供一个后端接口地址，element-ui会自动帮你发送请求，上传图片 -->
    <el-upload
      :class="{ disabled: isDisabled }"
      action=""
      :limit="limitCount"
      :file-list="fileList"
      list-type="picture-card"
      :on-remove="handleRemove"
      :on-change="handleChange"
      :http-request="handleUpload"
      :before-upload="beforeUpload"
      :on-preview="handlePictureCardPreview"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog
      width="600px"
      top="8vh"
      title="图片预览"
      :visible="showDialog"
      @close="showDialog = false"
    >
      <img width="100%" :src="imgUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
// SecretId: AKIDPdbJkunQmrfBRP6WfX9UZMs74lBJAl57
// SecretKey: mIYXF1XliOnwoPkpd9ON5WgaEafT0GFw
import COS from "cos-js-sdk-v5"; // 导入腾讯云的包(sdk)
const cos = new COS({
  SecretId: "AKIDPdbJkunQmrfBRP6WfX9UZMs74lBJAl57", // 身份识别ID
  SecretKey: "mIYXF1XliOnwoPkpd9ON5WgaEafT0GFw", // 身份秘钥
});

export default {
  name: "ImageUpload",
  props: {
    limitCount: {
      type: Number,
      default: 1,
    },
  },
  computed: {
    isDisabled() {
      return this.fileList.length >= this.limitCount;
    },
    isAllUploadSuccess() {
      return this.fileList.every((item) => item.status === "success");
    },
  },
  data() {
    return {
      showDialog: false, // 控制显示弹层
      imgUrl: "",
      fileList: [
        // {
        //   url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201905%2F17%2F20190517211730_kurtr.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651631267&t=b43e8f00edef6a773a15528a226983f2",
        // },
        // {
        //   url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F02%2F20200402133820_4YaiP.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651631325&t=902600ef438874b2836faf917e1f3315",
        // },
      ],
    };
  },
  methods: {
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return false;
      }
      return true;
    },
    handleChange(file, fileList) {
      console.log(file, fileList);
      // this.fileList = fileList;
      this.fileList = [...fileList];
    },
    handleUpload(obj) {
      console.log("可以上传了", obj.file);
      const uid = obj.file.uid;
      const fileObj = this.fileList.find((item) => item.uid === uid);
      fileObj.status = "uploading";
      // 执行上传操作
      cos.putObject(
        {
          Bucket: "rlzyxtbs-1308220808" /* 存储桶 */,
          Region: "ap-chengdu" /* 存储桶所在地域，必须字段 */,
          Key: parseInt(Math.random() * 9999999) + obj.file.name /* 文件名 */,
          StorageClass: "STANDARD", // 上传模式, 标准模式
          Body: obj.file, // 上传文件对象
          onProgress: (progressData) => {
            console.log(JSON.stringify(progressData));
            fileObj.percentage = parseInt(progressData.percent * 100);
          },
        },
        (err, data) => {
          console.log(err || data);
          fileObj.url = "https://" + data.Location;
          setTimeout(() => {
            fileObj.status = "success";
          }, 500);
        }
      );
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      // this.fileList = fileList;
      // 做法一
      this.fileList = [...fileList];
      // 做法二：
      // this.fileList = this.fileList.filter((item) => item.uid !== file.uid);
    },
    handlePictureCardPreview(file) {
      // 这里应该弹出一个层 层里是点击的图片地址
      this.showDialog = true;
      this.imgUrl = file.url;
    },
  },
};
</script>

<style lang="scss" scoped>
.disabled {
  ::v-deep {
    .el-upload--picture-card {
      display: none !important;
    }
  }
}
</style>